<template>
  <div>
    <!-- 折叠面板组件 -->
    <!-- <Collapse simple class="send-news" @on-change="changeIcon">
      <Panel name="1" hide-arrow>
        <Row type="flex" align="middle">
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col span="15">传播分析</Col>
              <Col span="1" style="font-size:25px;">
                <Icon
                  type="md-arrow-dropdown"
                  :class="[rotate?  'el-icon-arrow-left go' : ' el-icon-arrow-left aa' ]"
                />
              </Col>
            </Row>
          </Col>
        </Row>
    <!-- 新闻筛选展开项目-->
    <!-- <div slot="content">1111</div>
      </Panel>
    </Collapse>-->
    <Row class="pa_information_display">
      <Col span="6">
        <idcCard :title="'风险等级'" :content="'危害期'" :index="'color1'"></idcCard>
      </Col>
      <Col span="6">
        <idcCard :title="'舆情态势'" :content="'潜伏期'" :index="'color2'"></idcCard>
      </Col>
      <Col span="6">
        <idcCard :title="'风险指数'" :content="'99'" :index="'color3'"></idcCard>
      </Col>
      <Col span="6">
        <idcCard :title="'传播力指数'" :content="'86'" :index="'color4'"></idcCard>
      </Col>
    </Row>
    <Card class="pa_card">
      <div style="min-height: 200px">
        <Row class="card_title">
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>事件描述</Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span="22">
            <h3>中国人民银行于6月29日开展央行票据互换（CBS）操作</h3>
            <p class="event_time">时间：2020年6月15日</p>
            <p>为提高银行永续债的市场流动性，支持银行发行永续债补充资本，增强金融服务实体经济的能力，中国人民银行于2020年6月29日开展了央行票据互换（CBS）操作，期限3个月，费率0.10%。本次操作面向公开市场业务一级交易商公开招标，中标机构包括国有大型商业银行、股份制银行、城商行、农商行、证等各类金融机构。换入债券既有国有大型商业银行和股份制银行发行的永续债，也有城商行发行的永续债，体现了对中小银行发行永续债补充资本的支持</p>
            <p>但是也有不同意楼继伟观点的人,中立者则选择围绕中等收入陷阱展开争辩。</p>
            <p>
              操作量50亿元，期限3个月，费率0.10%。本次操作面向公开市场业务一级交易商公开招标，中标机构包括国有大型商业银行、股份制银行、城商行、农商行、证
              等各类金融机构。换入债券既有国有大型商业银行和股份制银行发行的永续债，也有城商行发行的永续债，体现了对中小银行发行永续债补充资本的支持。操作量50亿元，期限3个月，费率0.10%。本次操作面向公开市场业务一级交易商公开招标，中标机构包括国有大型商业银行、股份制银行、城商行、农商行、也有城商行发行的永续债，体现了对中小银行发行永续债补充资本的支持。
            </p>
          </Col>
        </Row>
      </div>
    </Card>
    <Card class="pa_card">
      <div style="min-height: 300px">
        <Row class="card_title">
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>主题脉络</Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <!-- 主题脉络时间轴 -->
          <Timeline>
            <TimelineItem>
              <Row>
                <Col span="22" class="context_time_line">
                  <Row>
                    <Col span="1">
                      <div class="ctl_label">中性</div>
                    </Col>
                    <Col span="20" style="margin-top:8px;margin-left:5px;">首都再战“疫”，难忘40天</Col>
                  </Row>
                </Col>
              </Row>
            </TimelineItem>
            <TimelineItem>
              <Row type="flex" align="middle">
                <Col span="22" class="context_time_line">
                  <Row type="flex" align="middle">
                    <Col span="1">
                      <div class="ctl_label">中性</div>
                    </Col>
                    <Col span="20" style="margin-top:8px;margin-left:5px;">首都再战“疫”，难忘40天</Col>
                  </Row>
                </Col>
              </Row>
            </TimelineItem>
            <TimelineItem>
              <Row type="flex" align="middle">
                <Col span="22" class="context_time_line">
                  <Row type="flex" align="middle">
                    <Col span="1">
                      <div class="ctl_label">中性</div>
                    </Col>
                    <Col span="20" style="margin-top:8px;margin-left:5px;">首都再战“疫”，难忘40天</Col>
                  </Row>
                </Col>
              </Row>
            </TimelineItem>
            <TimelineItem>
              <Row type="flex" align="middle">
                <Col span="22" class="context_time_line">
                  <Row type="flex" align="middle">
                    <Col span="1">
                      <div class="ctl_label">中性</div>
                    </Col>
                    <Col span="20" style="margin-top:8px;margin-left:5px;">首都再战“疫”，难忘40天</Col>
                  </Row>
                </Col>
              </Row>
            </TimelineItem>
          </Timeline>
        </Row>
      </div>
    </Card>
    <Card class="pa_card">
      <div style="min-height: 350px">
        <Row class="card_title">
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>事件传播趋势</Col>
            </Row>
          </Col>
        </Row>
        <Row type="flex" align="middle">
          <Col span="12">
            <div id="sound_waves"></div>
          </Col>
          <Col span="11" push="1">
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>传播时长：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">86天17小时</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>新闻报道总数：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">1000</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>最早报道时间：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">2018-06-23</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>最早报道新闻：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">支持银行发行永续债补充资本</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="5">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>负面情绪最高点：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">2018--06-25</Col>
            </Row>
          </Col>
        </Row>
      </div>
    </Card>
    <Card class="pa_card">
      <div style="min-height: 500px">
        <Row class="card_title">
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>传播路径</Col>
            </Row>
          </Col>
        </Row>
        <Row type="flex">
          <Col span="12" offset="1">
            <div id="container" style="height:500px;"></div>
          </Col>
          <Col span="10" class="ppath_style">
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>传播点：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">新华网</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>爆发点：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">新华网</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>内容源</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">......</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>独立点：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">央视网</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>TOP5爆点：</Col>
                </Row>
              </Col>
              <Col span="12">
                <Row>
                  <Col span="4">重庆</Col>
                  <Col span="20">
                    <Progress :percent="50" :stroke-width="15" status="active" />
                  </Col>
                </Row>
                <Row>
                  <Col span="4">武汉</Col>
                  <Col span="20">
                    <Progress :percent="45" :stroke-width="15" status="active" />
                  </Col>
                </Row>
                <Row>
                  <Col span="4">南京</Col>
                  <Col span="20">
                    <Progress :percent="16" :stroke-width="15" status="active" />
                  </Col>
                </Row>
                <Row>
                  <Col span="4">深圳</Col>
                  <Col span="20">
                    <Progress :percent="10" :stroke-width="15" status="active" />
                  </Col>
                </Row>
                <Row>
                  <Col span="4">厦门</Col>
                  <Col span="20">
                    <Progress :percent="5" :stroke-width="15" status="active" />
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </Card>
    <Row :gutter="12">
      <Col span="10">
        <Card class="pa_card">
          <div style="min-height: 350px">
            <Row class="card_title">
              <Col span="3">
                <Row type="flex" align="middle">
                  <Col span="2">
                    <div class="nl-square"></div>
                  </Col>
                  <Col>热门主题词</Col>
                </Row>
              </Col>
            </Row>
            <Row type="flex" align="middle" style="margin-top:40px;">
              <Col span="13">
                <!-- 热词云 -->
                <div id="hot_word_cloud"></div>
              </Col>
              <Col span="11">
                <Row>排行占比：</Row>
                <Row>
                  <Col span="6">G2</Col>
                  <Col span="18">
                    <Progress :percent="50" :stroke-width="15" status="active" />
                  </Col>
                </Row>
                <Row>
                  <Col span="6">G6</Col>
                  <Col span="18">
                    <Progress :percent="45" :stroke-width="15" status="active" />
                  </Col>
                </Row>
                <Row>
                  <Col span="6">Data vis</Col>
                  <Col span="18">
                    <Progress :percent="16" :stroke-width="15" status="active" />
                  </Col>
                </Row>
                <Row>
                  <Col span="6">Pizza Chart</Col>
                  <Col span="18">
                    <Progress :percent="10" :stroke-width="15" status="active" />
                  </Col>
                </Row>
                <Row>
                  <Col span="6">Graph</Col>
                  <Col span="18">
                    <Progress :percent="5" :stroke-width="15" status="active" />
                  </Col>
                </Row>
              </Col>
            </Row>
          </div>
        </Card>
      </Col>
      <Col span="14">
        <Card class="pa_card">
          <div style="min-height: 350px">
            <Row class="card_title">
              <Col span="3">
                <Row type="flex" align="middle">
                  <Col span="2">
                    <div class="nl-square"></div>
                  </Col>
                  <Col>情感属性</Col>
                </Row>
              </Col>
            </Row>
            <Row type="flex" align="middle">
              <!-- 情感属性环形图 -->
              <Col span="12">
                <div id="emotional_attributes_chart"></div>
              </Col>
              <Col span="10" push="2" class="ea_right">
                <Row class="ppath_row_style">
                  <Col span="8">
                    <Row type="flex" align="middle">
                      <Col span="4">
                        <div class="circle_icon"></div>
                      </Col>
                      <Col>正面评分：</Col>
                    </Row>
                  </Col>
                  <Col span="12">1</Col>
                </Row>
                <Row class="ppath_row_style">
                  <Col span="8">
                    <Row type="flex" align="middle">
                      <Col span="4">
                        <div class="circle_icon"></div>
                      </Col>
                      <Col>中性评分：</Col>
                    </Row>
                  </Col>
                  <Col span="12">0</Col>
                </Row>
                <Row class="ppath_row_style">
                  <Col span="8">
                    <Row type="flex" align="middle">
                      <Col span="4">
                        <div class="circle_icon"></div>
                      </Col>
                      <Col>负面评分</Col>
                    </Row>
                  </Col>
                  <Col span="12">-1</Col>
                </Row>
              </Col>
            </Row>
          </div>
        </Card>
      </Col>
    </Row>
    <Card class="pa_card">
      <div style="min-height: 450px">
        <Row class="card_title">
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>地域分布图</Col>
            </Row>
          </Col>
        </Row>
        <!-- 主要内容：分为三部分
        左侧：地域选择
        中间：地图
        右侧：信息展示-->
        <Row :gutter="12">
          <Col span="7">
            <Select v-model="ccModel" filterable>
              <Option
                v-for="item in ChinaCityList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </Col>
          <Col span="10">
            <div id="area_map" style="height:400px;"></div>
          </Col>
          <Col span="7">
            <Row class="ppath_row_style">
              <Col span="8">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>覆盖区域数量：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">32</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="8">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>覆盖最高区域：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">武汉</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="8">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>最早新闻报道：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">基金的保护措施</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="8">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>最早报道媒体：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">搜狐新闻</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="8">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>源发地：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">山西</Col>
            </Row>
            <Row class="ppath_row_style">
              <Col span="8">
                <Row type="flex" align="middle">
                  <Col span="4">
                    <div class="circle_icon"></div>
                  </Col>
                  <Col>爆发地：</Col>
                </Row>
              </Col>
              <Col span="12" style="color:#4196ff">武汉</Col>
            </Row>
          </Col>
        </Row>
      </div>
    </Card>
    <Row :gutter="12">
      <Col span="12">
        <Card class="pa_card">
          <div style="min-height: 350px">
            <Row class="card_title">
              <Col span="3">
                <Row type="flex" align="middle">
                  <Col span="2">
                    <div class="nl-square"></div>
                  </Col>
                  <Col>媒体占比</Col>
                </Row>
              </Col>
            </Row>
            <!-- 媒体选项卡 -->
            <Row>
              <ButtonGroup>
                <Button>微博</Button>
                <Button type="primary">网页</Button>
                <Button>微信</Button>
                <Button>客户端</Button>
                <Button>论坛</Button>
                <Button>报刊</Button>
                <Button>视频</Button>
                <Button>头条号</Button>
              </ButtonGroup>
            </Row>
            <!-- 媒体占比环形图 -->
            <Row type="flex" justify="space-around">
              <Col span="11">
                <div id="media_chart1"></div>
              </Col>
              <Col span="11">
                <div id="media_chart2"></div>
              </Col>
            </Row>
          </div>
        </Card>
      </Col>
      <Col span="12">
        <Card class="pa_card">
          <div style="min-height: 350px">
            <Row class="card_title">
              <Col span="3">
                <Row type="flex" align="middle">
                  <Col span="2">
                    <div class="nl-square"></div>
                  </Col>
                  <Col>媒体影响趋势</Col>
                </Row>
              </Col>
            </Row>
            <Row type="flex" justify="center">
              <Col>
                <div id="media_influence_trends"></div>
              </Col>
            </Row>
          </div>
        </Card>
      </Col>
    </Row>
    <Row :gutter="12">
      <Col span="8">
        <Card class="pa_card">
          <div style="min-height: 350px">
            <Row class="card_title">
              <Col span="4">
                <Row type="flex" align="middle">
                  <Col span="2">
                    <div class="nl-square"></div>
                  </Col>
                  <Col>平台影响率</Col>
                </Row>
              </Col>
            </Row>
            <!-- 媒体选项卡 -->
            <Row>
              <ButtonGroup>
                <Button>微博</Button>
                <Button>网页</Button>
                <Button>微信</Button>
                <Button>客户端</Button>
                <Button>论坛</Button>
              </ButtonGroup>
            </Row>
            <Row type="flex" justify="center" style="padding-top:10px;">
              <Col id="platform_impact"></Col>
            </Row>
          </div>
        </Card>
      </Col>
      <Col span="8">
        <!-- 媒体排行模块 -->
        <Card class="pa_card">
          <div style="min-height: 350px">
            <Row class="card_title">
              <Col span="4">
                <Row type="flex" align="middle">
                  <Col span="2">
                    <div class="nl-square"></div>
                  </Col>
                  <Col>媒体排行</Col>
                </Row>
              </Col>
            </Row>
            <Row
              type="flex"
              justify="center"
              align="middle"
              class="pa_media_row pa_media_row_first"
            >
              <Col span="2">
                <div class="pa_media_logo">
                  <img :src="paImg.wechat" alt class="pa_media_logo_img" />
                </div>
              </Col>
              <Col span="4">今日头条</Col>
              <Col span="12">
                <Progress :percent="45" status="active" />
              </Col>
              <Col span="2">7篇</Col>
            </Row>
            <Row type="flex" justify="center" align="middle" class="pa_media_row">
              <Col span="2">
                <div class="pa_media_logo">
                  <img :src="paImg.wechat" alt class="pa_media_logo_img" />
                </div>
              </Col>
              <Col span="4">今日头条</Col>
              <Col span="12">
                <Progress :percent="45" status="active" />
              </Col>
              <Col span="2">7篇</Col>
            </Row>
            <Row type="flex" justify="center" align="middle" class="pa_media_row">
              <Col span="2">
                <div class="pa_media_logo">
                  <img :src="paImg.wechat" alt class="pa_media_logo_img" />
                </div>
              </Col>
              <Col span="4">今日头条</Col>
              <Col span="12">
                <Progress :percent="45" status="active" />
              </Col>
              <Col span="2">7篇</Col>
            </Row>
            <Row type="flex" justify="center" align="middle" class="pa_media_row">
              <Col span="2">
                <div class="pa_media_logo">
                  <img :src="paImg.wechat" alt class="pa_media_logo_img" />
                </div>
              </Col>
              <Col span="4">今日头条</Col>
              <Col span="12">
                <Progress :percent="45" status="active" />
              </Col>
              <Col span="2">7篇</Col>
            </Row>
            <Row type="flex" justify="center" align="middle" class="pa_media_row">
              <Col span="2">
                <div class="pa_media_logo">
                  <img :src="paImg.wechat" alt class="pa_media_logo_img" />
                </div>
              </Col>
              <Col span="4">今日头条</Col>
              <Col span="12">
                <Progress :percent="45" status="active" />
              </Col>
              <Col span="2">7篇</Col>
            </Row>
          </div>
        </Card>
      </Col>
      <Col span="8">
        <Card class="pa_card">
          <div style="min-height: 350px">
            <Row class="card_title">
              <Col span="4">
                <Row type="flex" align="middle">
                  <Col span="2">
                    <div class="nl-square"></div>
                  </Col>
                  <Col>重点人员</Col>
                </Row>
              </Col>
            </Row>
            <!-- 媒体选项卡 -->
            <Row>
              <ButtonGroup>
                <Button>微博</Button>
                <Button>网页</Button>
                <Button>微信</Button>
                <Button>客户端</Button>
                <Button>论坛</Button>
              </ButtonGroup>
            </Row>
            <!-- 人员卡片 -->
            <Row>
              <Card class="staff_card">
                <Row type="flex" align="top">
                  <Col span="4">
                    <img :src="paImg.avatar" alt class="card_avatar" />
                  </Col>
                  <Col>
                    <Row>
                      <h4>张某某</h4>
                    </Row>
                    <Row class="staff_occupation">金融分析师</Row>
                  </Col>
                </Row>
              </Card>
              <Card class="staff_card">
                <Row type="flex" align="top">
                  <Col span="4">
                    <img :src="paImg.avatar" alt class="card_avatar" />
                  </Col>
                  <Col>
                    <Row>
                      <h4>张某某</h4>
                    </Row>
                    <Row class="staff_occupation">基金股票分析师</Row>
                  </Col>
                </Row>
              </Card>
              <Card class="staff_card">
                <Row type="flex" align="top">
                  <Col span="4">
                    <img :src="paImg.avatar" alt class="card_avatar" />
                  </Col>
                  <Col>
                    <Row>
                      <h4>张某某</h4>
                    </Row>
                    <Row class="staff_occupation">理财分析师</Row>
                  </Col>
                </Row>
              </Card>
            </Row>
          </div>
        </Card>
      </Col>
    </Row>
    <Card class="pa_card">
      <div style="min-height: 350px">
        <Row class="card_title">
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>观点分析</Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Select v-model="selectmodel" style="width:100px;margin-right:10px;">
            <Option v-for="item in selectData" :value="item.value" :key="item.value"></Option>
          </Select>
          <Select v-model="selectmodel" style="width:100px;margin-right:10px;">
            <Option v-for="item in selectData" :value="item.value" :key="item.value"></Option>
          </Select>
          <Select v-model="selectmodel" style="width:100px;margin-right:10px;">
            <Option v-for="item in selectData" :value="item.value" :key="item.value"></Option>
          </Select>
          <Select v-model="selectmodel" style="width:100px;margin-right:10px;">
            <Option v-for="item in selectData" :value="item.value" :key="item.value"></Option>
          </Select>
          <Select v-model="selectmodel" style="width:100px;margin-right:10px;">
            <Option v-for="item in selectData" :value="item.value" :key="item.value"></Option>
          </Select>
        </Row>
        <Row>
          <Col span="15">
            <Row
              class="opinion_analysis_entry"
              style="margin-top:20px;"
            >尚福林：响全球金融合作的大环境,要在改革爬坡过坎儿过程当中尽早打破既有的利益格局,当前。 金融开放是热议的焦点话题之一。</Row>
            <Row
              class="opinion_analysis_entry"
            >周小川：在传播媒体中，客户端相关信息最多，总计19257条，占比52.58%;其中“58本地版”总计发布相关信息9507条。</Row>
            <Row class="opinion_analysis_entry">叶檀：华尔街上的纽约股票市场刮起了股票暴跌的风潮，爆发了历史上最大的一次崩盘事件，史称“黑色星期一”。</Row>
            <Row class="opinion_analysis_entry">楼继伟：多方面的历练对了解国民经济运作的机制大有裨益,可适当推延的,减少了理想化色彩。</Row>
            <Row
              class="opinion_analysis_entry"
            >蔡宏图：在传播媒体中，客户端相关信息最多，总计19257条，占比52.58%;其中“58本地版”总计发布相关信息9507条。</Row>
            <Row class="opinion_analysis_entry">朱明：整体来看，中性信息最多，总计36528条，占比99.74%。</Row>
          </Col>
          <Col span="9">
            <div id="sentiment_analysis"></div>
          </Col>
        </Row>
      </div>
    </Card>
    <Card class="pa_card">
      <div style="min-height: 350px">
        <Row class="card_title">
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>相关文章</Col>
            </Row>
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
import DataSet from "@antv/data-set";
//引入antv G6
import G6 from "@antv/g6";
//引入antv G2
import { Chart, registerShape, Util } from "@antv/g2";
//引入antv G7
import { Scene } from "@antv/l7";
import { CountryLayer } from "@antv/l7-district";
import { Mapbox } from "@antv/l7-maps";
import insertCss from "insert-css";

import idcCard from "./components/infomation-display-card/information-display-card";

insertCss(`
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #000;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
`);

export default {
  components: {
    idcCard
  },
  data() {
    return {
      testdata: [
        { feature: "Battery", value: 0.22, phone: "iPhone" },
        { feature: "Brand", value: 0.28, phone: "iPhone" },
        { feature: "Contract", value: 0.29, phone: "iPhone" },
        { feature: "Design", value: 0.17, phone: "iPhone" },
        { feature: "Internet", value: 0.22, phone: "iPhone" },
        { feature: "Large", value: 0.02, phone: "iPhone" },
        { feature: "Price", value: 0.21, phone: "iPhone" },
        { feature: "Smartphone", value: 0.5, phone: "iPhone" },
        { feature: "Battery", value: 0.27, phone: "Samsung" },
        { feature: "Brand", value: 0.16, phone: "Samsung" },
        { feature: "Contract", value: 0.35, phone: "Samsung" },
        { feature: "Design", value: 0.13, phone: "Samsung" },
        { feature: "Internet", value: 0.2, phone: "Samsung" },
        { feature: "Large", value: 0.13, phone: "Samsung" },
        { feature: "Price", value: 0.35, phone: "Samsung" },
        { feature: "Smartphone", value: 0.38, phone: "Samsung" },
        { feature: "Battery", value: 0.26, phone: "Nokia Smartphone" },
        { feature: "Brand", value: 0.1, phone: "Nokia Smartphone" },
        { feature: "Contract", value: 0.3, phone: "Nokia Smartphone" },
        { feature: "Design", value: 0.14, phone: "Nokia Smartphone" },
        { feature: "Internet", value: 0.22, phone: "Nokia Smartphone" },
        { feature: "Large", value: 0.04, phone: "Nokia Smartphone" },
        { feature: "Price", value: 0.41, phone: "Nokia Smartphone" },
        { feature: "Smartphone", value: 0.3, phone: "Nokia Smartphone" }
      ],
      //情感属性数据
      eaData: [
        { item: "中性", count: 40, percent: 0.4 },
        { item: "负面", count: 20, percent: 0.2 },
        { item: "正面", count: 40, percent: 0.4 }
      ],
      // 各个省份数据
      ProvinceData: [
        {
          name: "云南省",
          code: 530000,
          value: 17881.12
        },
        {
          name: "黑龙江省",
          code: 230000,
          value: 16361.62
        },
        {
          name: "贵州省",
          code: 520000,
          value: 14806.45
        },
        {
          name: "北京市",
          code: 110000,
          value: 30319.98
        },
        {
          name: "河北省",
          code: 130000,
          value: 36010.27
        },
        {
          name: "山西省",
          code: 140000,
          value: 16818.11
        },
        {
          name: "吉林省",
          code: 220000,
          value: 15074
        },
        {
          name: "宁夏回族自治区",
          code: 640000,
          value: 3705.18
        },
        {
          name: "辽宁省",
          code: 210000,
          value: 25315.35
        },
        {
          name: "海南省",
          code: 460000,
          value: 4832.05
        },
        {
          name: "内蒙古自治区",
          code: 150000,
          value: 17289.22
        },
        {
          name: "天津市",
          code: 120000,
          value: 18809.64
        },
        {
          name: "新疆维吾尔自治区",
          code: 650000,
          value: 12199.08
        },
        {
          name: "上海市",
          code: 310000,
          value: 32679.87
        },
        {
          name: "陕西省",
          code: 610000,
          value: 24438.32
        },
        {
          name: "甘肃省",
          code: 620000,
          value: 8246.07
        },
        {
          name: "安徽省",
          code: 340000,
          value: 30006.82
        },
        {
          name: "香港特别行政区",
          code: 810000,
          value: 0
        },
        {
          name: "广东省",
          code: 440000,
          value: 97277.77
        },
        {
          name: "河南省",
          code: 410000,
          value: 48055.86
        },
        {
          name: "湖南省",
          code: 430000,
          value: 36425.78
        },
        {
          name: "江西省",
          code: 360000,
          value: 21984.78
        },
        {
          name: "四川省",
          code: 510000,
          value: 40678.13
        },
        {
          name: "广西壮族自治区",
          code: 450000,
          value: 20353.51
        },
        {
          name: "江苏省",
          code: 320000,
          value: 92595.4
        },
        {
          name: "澳门特别行政区",
          code: 820000,
          value: null
        },
        {
          name: "浙江省",
          code: 330000,
          value: 56197.15
        },
        {
          name: "山东省",
          code: 370000,
          value: 76469.67
        },
        {
          name: "青海省",
          code: 630000,
          value: 2865.23
        },
        {
          name: "重庆市",
          code: 500000,
          value: 20363.19
        },
        {
          name: "福建省",
          code: 350000,
          value: 35804.04
        },
        {
          name: "湖北省",
          code: 420000,
          value: 39366.55
        },
        {
          name: "西藏自治区",
          code: 540000,
          value: 1477.63
        },
        {
          name: "台湾省",
          code: 710000,
          value: null
        }
      ],
      //媒体类型占比
      mediaType: [
        { item: "客户端", count: 40, percent: 0.4 },
        { item: "微博", count: 20, percent: 0.2 },
        { item: "微信", count: 32, percent: 0.32 },
        { item: "网页", count: 8, percent: 0.08 }
      ],
      // 媒体单项展开
      mediaProject: [
        { item: "item1", count: 32, percent: 0.32 },
        { item: "item2", count: 8, percent: 0.08 },
        { item: "item3", count: 40, percent: 0.4 },
        { item: "item4", count: 20, percent: 0.2 }
      ],
      // 媒体影响趋势
      mediaInfluence: [
        { date: "06-16", media: "微信", influence: 8000 },
        { date: "06-16", media: "微博", influence: 4500 },
        { date: "06-16", media: "论坛", influence: 1200 },
        { date: "06-16", media: "报刊", influence: 230 },
        { date: "06-17", media: "微信", influence: 5321 },
        { date: "06-17", media: "微博", influence: 3200 },
        { date: "06-17", media: "论坛", influence: 1055 },
        { date: "06-17", media: "报刊", influence: 200 },
        { date: "06-18", media: "微信", influence: 5500 },
        { date: "06-18", media: "微博", influence: 3500 },
        { date: "06-18", media: "论坛", influence: 1100 },
        { date: "06-18", media: "报刊", influence: 210 },
        { date: "06-19", media: "微信", influence: 4621 },
        { date: "06-19", media: "微博", influence: 3100 },
        { date: "06-19", media: "论坛", influence: 1011 },
        { date: "06-19", media: "报刊", influence: 198 },
        { date: "06-20", media: "微信", influence: 1945 },
        { date: "06-20", media: "微博", influence: 960 },
        { date: "06-20", media: "论坛", influence: 596 },
        { date: "06-20", media: "报刊", influence: 156 },
        { date: "06-21", media: "微信", influence: 1823 },
        { date: "06-21", media: "微博", influence: 896 },
        { date: "06-21", media: "论坛", influence: 520 },
        { date: "06-21", media: "报刊", influence: 152 },
        { date: "06-22", media: "微信", influence: 0 },
        { date: "06-22", media: "微博", influence: 0 },
        { date: "06-22", media: "论坛", influence: 0 },
        { date: "06-22", media: "报刊", influence: 0 }
      ],
      platformImpactData: [
        { item: "展现", frequency: 50000 },
        { item: "点击", frequency: 35000 },
        { item: "访问", frequency: 25000 },
        { item: "咨询", frequency: 15000 },
        { item: "订单", frequency: 8000 }
      ],
      // 图片链接
      paImg: {
        wechat: "",
        avatar: ""
      },
      // 选择器数据
      selectData: [
        { value: "监管部门" },
        { value: "主流媒体" },
        { value: "自媒体" },
        { value: "专家机构" },
        { value: "相关从业者观点" },
        { value: "受损投资者" }
      ],
      selectmodel: "",
      //观点情绪分析图数据
      sentimentAnalysisData: [
        { sentiment: "喜", value: 85 },
        { sentiment: "怒", value: 22 },
        { sentiment: "忧", value: 42 },
        { sentiment: "思", value: 76 },
        { sentiment: "悲", value: 30 },
        { sentiment: "恐", value: 12 },
        { sentiment: "惊", value: 4 }
      ],
      // 地域分布各个城市数据
      ChinaCityList: [
        {
          value: "北京",
          label: "北京"
        },
        {
          value: "天津",
          label: "天津"
        },
        {
          value: "上海",
          label: "上海"
        },
        {
          value: "武汉",
          label: "武汉"
        },
        {
          value: "山西",
          label: "山西"
        }
      ],
      ccModel: "",
      rotate: false
    };
  },
  created() {
    this.paImg.wechat = require("../assets/IMG/wechat.png");
    this.paImg.avatar = require("../assets/IMG/avatar.jpg");
  },
  methods: {
    //改变折叠面板的图标https://www.cnblogs.com/IwishIcould/p/11823397.html
    changeIcon() {
      this.rotate = !this.rotate;
    },
    // 风险指数图（左侧）
    fxChartLeft() {
      // 创建chart对象
      const chart = new Chart({
        container: "mountNode", // 指定图表容器 ID
        width: 600, // 指定图表宽度
        height: 300 // 指定图表高度
      });
      // Step 2: 载入数据源
      chart.data(this.testdata);
      // Step 3: 创建图形语法，绘制柱状图
      // 点图
      // chart.point().position("feature*value").color('phone').shape('phone', ['circle', 'square', 'triangle']).size(6);
      chart
        .point()
        .adjust("stack")
        .position("feature*value")
        .color("phone")
        .shape("circle");
      // 折线图
      chart
        .line()
        .adjust("stack")
        .position("feature*value")
        .color("phone");
      // 面积图
      chart
        .area()
        .adjust("stack")
        .position("feature*value")
        .color("phone");
      // 极坐标
      // chart.coordinate('polar');
      // 我们以 phone  字段为分割维度，使用 rect  分面类型，以列分面的性质展示三个手机的各自的数据集。
      // chart.facet("rect", {
      //   fields: [null, "phone"],
      //   rowTitle: {
      //     style: {
      //       textAlign: "start",
      //       fontSize: 12
      //     }
      //   },
      //   eachView(view) {
      //     view.area().position("feature*value");
      //     view.line().position("feature*value");
      //     view
      //       .point()
      //       .position("feature*value")
      //       .shape("circle");
      //   }
      // });
      // Step 4: 渲染图表
      chart.render();
    },
    // 传播路径图
    pathChart() {
      const width = document.getElementById("container").scrollWidth;
      const height = document.getElementById("container").scrollHeight || 500;
      const graph = new G6.Graph({
        container: "container",
        width,
        height: 500,
        layout: {
          type: "force",
          edgeStrength: 0.7
        },
        modes: {
          default: [
            "drag-canvas",
            {
              type: "tooltip",
              formatText: function formatText(model) {
                return model.name;
              },
              offset: 30
            },
            {
              type: "edge-tooltip",
              formatText: function formatText(model, e) {
                const edge = e.item;
                return (
                  "来源：" +
                  edge.getSource().getModel().name +
                  "<br/>去向：" +
                  edge.getTarget().getModel().name
                );
              },
              offset: 30
            }
          ]
        },
        defaultNode: {
          size: [10, 10],
          style: {
            lineWidth: 2,
            fill: "#DEE9FF",
            stroke: "#5B8FF9"
          }
        },
        defaultEdge: {
          size: 1,
          style: {
            stroke: "#e2e2e2",
            lineAppendWidth: 2
          }
        },
        nodeStateStyles: {
          highlight: {
            opacity: 1
          },
          dark: {
            opacity: 0.2
          }
        },
        edgeStateStyles: {
          highlight: {
            stroke: "#999"
          }
        }
      });
      function clearAllStats() {
        graph.setAutoPaint(false);
        graph.getNodes().forEach(function(node) {
          graph.clearItemStates(node);
        });
        graph.getEdges().forEach(function(edge) {
          graph.clearItemStates(edge);
        });
        graph.paint();
        graph.setAutoPaint(true);
      }
      graph.on("node:mouseenter", function(e) {
        const item = e.item;
        graph.setAutoPaint(false);
        graph.getNodes().forEach(function(node) {
          graph.clearItemStates(node);
          graph.setItemState(node, "dark", true);
        });
        graph.setItemState(item, "dark", false);
        graph.setItemState(item, "highlight", true);
        graph.getEdges().forEach(function(edge) {
          if (edge.getSource() === item) {
            graph.setItemState(edge.getTarget(), "dark", false);
            graph.setItemState(edge.getTarget(), "highlight", true);
            graph.setItemState(edge, "highlight", true);
            edge.toFront();
          } else if (edge.getTarget() === item) {
            graph.setItemState(edge.getSource(), "dark", false);
            graph.setItemState(edge.getSource(), "highlight", true);
            graph.setItemState(edge, "highlight", true);
            edge.toFront();
          } else {
            graph.setItemState(edge, "highlight", false);
          }
        });
        graph.paint();
        graph.setAutoPaint(true);
      });
      graph.on("node:mouseleave", clearAllStats);
      graph.on("canvas:click", clearAllStats);
      fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/xiaomi.json")
        .then(res => res.json())
        .then(data => {
          graph.data({
            nodes: data.nodes,
            edges: data.edges.map(function(edge, i) {
              edge.id = "edge" + i;
              return Object.assign({}, edge);
            })
          });

          graph.render();
        });
    },
    // 热词云
    createHotWordCloud() {
      function getTextAttrs(cfg) {
        return {
          ...cfg.style,
          fontSize: cfg.data.size,
          text: cfg.data.text,
          textAlign: "center",
          fontFamily: cfg.data.font,
          fill: cfg.color,
          textBaseline: "Alphabetic"
        };
      }
      // 给 point 注册一个词云的 shape
      // point 几何标记名，如point,line等
      // cloud 注册的具体图形名，自定义图形的名称
      // draw 执行图形绘制逻辑、调用绘图引擎
      registerShape("point", "cloud", {
        draw(cfg, container) {
          const attrs = getTextAttrs(cfg);
          const textShape = container.addShape("text", {
            attrs: {
              ...attrs,
              x: cfg.x,
              y: cfg.y
            }
          });
          if (cfg.data.rotate) {
            Util.rotate(textShape, (cfg.data.rotate * Math.PI) / 180);
          }
          return textShape;
        }
      });
      //调用接口获取热词云数据
      fetch(
        "https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json"
      )
        .then(res => res.json())
        .then(data => {
          const dv = new DataSet.View().source(data);
          const range = dv.range("value");
          const min = range[0];
          const max = range[1];
          const imageMask = new Image();
          imageMask.crossOrigin = "";
          // 设置图片链接
          imageMask.src =
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=167390583,3097374760&fm=26&gp=0.jpg";
          imageMask.onload = () => {
            dv.transform({
              type: "tag-cloud",
              fields: ["name", "value"],
              imageMask,
              font: "Verdana",
              size: [350, 250], // 宽高设置最好根据 imageMask 做调整
              padding: 0,
              timeInterval: 5000, // max execute time
              rotate() {
                let random = ~~(Math.random() * 4) % 4;
                if (random === 2) {
                  random = 0;
                }
                return random * 90; // 0, 90, 270
              },
              fontSize(d) {
                return ((d.value - min) / (max - min)) * (32 - 8) + 8;
              }
            });
            const chart = new Chart({
              container: "hot_word_cloud",
              autoFit: false,
              width: 350, // 宽高设置最好根据 imageMask 做调整
              height: 250,
              padding: 0
            });
            chart.data(dv.rows);
            chart.scale({
              x: { nice: false },
              y: { nice: false }
            });
            chart.legend(false);
            chart.axis(false);
            chart.tooltip({
              showTitle: false,
              showMarkers: false
            });
            chart.coordinate().reflect();
            chart
              .point()
              .position("x*y")
              .color("text")
              .shape("cloud")
              .state({
                active: {
                  style: {
                    fillOpacity: 0.4
                  }
                }
              });
            chart.interaction("element-active");
            chart.render();
          };
        });
    },
    //情感属性环形图
    createEaChart() {
      // 1. 创建chart对象
      const chart = new Chart({
        container: "emotional_attributes_chart", //指定图标容器id
        // autoFit: true, //是否自适应 DOM 容器宽高，默认为 false，需要用户手动指定宽高
        width: 450,
        height: 300 //设置高度
      });
      // 2. 载入数据源
      chart.data(this.eaData);
      //度量定义
      chart.scale("percent", {
        formatter: val => {
          val = val * 100 + "%";
          return val;
        }
      });
      //坐标系配置，theta环形
      chart.coordinate("theta", {
        radius: 0.75, //用于极坐标，配置极坐标半径，0 - 1 范围的数值。
        innerRadius: 0.6 //用于极坐标，极坐标内半径，0 -1 范围的数值。
      });
      //提示信息 (Tooltip)，是指当鼠标悬停在图形上时，以提示框的形式展示该点的数据，比如该点的值，数据单位等，帮助用户快速获取图形的关键数据。
      chart.tooltip({
        showTitle: false, //是否显示标题
        showMarkers: false, // 不展示 tooltip markers
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      // 辅助文本
      //图形标注配置
      chart
        .annotation()
        .text({
          //辅助文本，指定位置添加文本说明
          position: ["50%", "50%"], //point定位位置
          content: "总信息量", //显示文本内容
          style: {
            //图形样式
            fontSize: 14,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetY: -20 //y方向的偏移量
        })
        .text({
          position: ["50%", "50%"],
          content: "100",
          style: {
            fontSize: 20,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetX: -10,
          offsetY: 20
        })
        .text({
          position: ["50%", "50%"],
          content: "条",
          style: {
            fontSize: 14,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetY: 20,
          offsetX: 20
        });
      //adjust("stack")数据调整层叠
      chart
        .interval()
        .adjust("stack")
        .position("percent")
        .color("item", ["#4196ff", "#ff9900", "#ff3300"])
        .label("percent", percent => {
          return {
            content: data => {
              return `${data.item}: ${percent * 100}%`;
            }
          };
        })
        .tooltip("item*percent", (item, percent) => {
          percent = percent * 100 + "%";
          return {
            name: item,
            value: percent
          };
        });

      chart.legend({
        position: "right"
      });
      chart.interaction("element-active");

      chart.render();
    },
    //地域分布图
    createAreaMapChart() {
      // 初始化地图
      const scene = new Scene({
        id: "area_map",
        map: new Mapbox({
          center: [116.2825, 39.9],
          pitch: 0,
          style: "blank",
          zoom: 3,
          width: 400,
          minZoom: 0,
          maxZoom: 10
        })
      });
      scene.on("loaded", () => {
        new CountryLayer(scene, {
          data: this.ProvinceData,
          joinBy: ["NAME_CHN", "name"],
          depth: 1,
          provinceStroke: "#783D2D",
          cityStroke: "#EBCCB4",
          cityStrokeWidth: 1,
          fill: {
            color: {
              field: "NAME_CHN",
              values: [
                "#feedde",
                "#fdd0a2",
                "#fdae6b",
                "#fd8d3c",
                "#e6550d",
                "#a63603"
              ]
            }
          },
          popup: {
            enable: true,
            Html: props => {
              return `<span>${props.NAME_CHN}</span>`;
            }
          }
        });
      });
    },
    // 媒体占比环形图
    createMediaType() {
      const chart = new Chart({
        container: "media_chart1",
        // autoFit: true,
        width: 300,
        height: 250
      });
      chart.data(this.mediaType);
      chart.scale("percent", {
        formatter: val => {
          val = val * 100 + "%";
          return val;
        }
      });
      chart.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.6
      });
      chart.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      // 辅助文本
      chart
        .annotation()
        .text({
          position: ["50%", "50%"],
          content: "信息总数",
          style: {
            fontSize: 14,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetY: -20
        })
        .text({
          position: ["50%", "50%"],
          content: "100",
          style: {
            fontSize: 20,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetX: -10,
          offsetY: 20
        })
        .text({
          position: ["50%", "50%"],
          content: "条",
          style: {
            fontSize: 14,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetY: 20,
          offsetX: 20
        });
      chart
        .interval()
        .adjust("stack")
        .position("percent")
        .color("item")
        .label("percent", percent => {
          return {
            content: data => {
              return `${data.item}: ${percent * 100}%`;
            }
          };
        })
        .tooltip("item*percent", (item, percent) => {
          percent = percent * 100 + "%";
          return {
            name: item,
            value: percent
          };
        });

      chart.interaction("element-active");

      chart.render();
    },
    // 点击媒体分类之后的图
    createMediaTypeSubordinate() {
      const chart = new Chart({
        container: "media_chart2",
        // autoFit: true,
        width: 300,
        height: 250
      });
      chart.data(this.mediaProject);
      chart.scale("percent", {
        formatter: val => {
          val = val * 100 + "%";
          return val;
        }
      });
      chart.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.6
      });
      chart.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      // 辅助文本
      chart
        .annotation()
        .text({
          position: ["50%", "50%"],
          content: "信息总数",
          style: {
            fontSize: 14,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetY: -20
        })
        .text({
          position: ["50%", "50%"],
          content: "100",
          style: {
            fontSize: 20,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetX: -10,
          offsetY: 20
        })
        .text({
          position: ["50%", "50%"],
          content: "条",
          style: {
            fontSize: 14,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetY: 20,
          offsetX: 20
        });
      chart
        .interval()
        .adjust("stack")
        .position("percent")
        .color("item")
        .label("percent", percent => {
          return {
            content: data => {
              return `${data.item}: ${percent * 100}%`;
            }
          };
        })
        .tooltip("item*percent", (item, percent) => {
          percent = percent * 100 + "%";
          return {
            name: item,
            value: percent
          };
        });

      chart.interaction("element-active");

      chart.render();
    },
    //媒体影响趋势折线图
    createMediaInfluenceTrends() {
      const chart = new Chart({
        container: "media_influence_trends",
        // autoFit: true,
        width: 650,
        height: 300
      });
      chart.data(this.mediaInfluence);
      chart.scale({
        month: {
          range: [0, 1]
        },
        temperature: {
          nice: true
        }
      });
      chart.tooltip({
        showCrosshairs: true,
        shared: true
      });
      chart
        .line()
        .position("date*influence")
        .color("media", ["#ff3300", "#ff9900", "#ffbc00", "#2475fb"])
        .shape("smooth");
      chart
        .point()
        .position("date*influence")
        .color("media", ["#ff3300", "#ff9900", "#ffbc00", "#2475fb"])
        .shape("circle");

      chart.render();
    },
    //平台影响率漏斗图
    createPlatformImpact() {
      const chart = new Chart({
        container: "platform_impact",
        // autoFit: true,
        width: 500,
        height: 270,
        padding: [50, 120, 40]
      });
      chart.data(this.platformImpactData);
      chart.axis(false);
      chart
        .coordinate("rect")
        .transpose()
        .scale(1, -1);
      chart.tooltip({
        showMarkers: false
      });
      chart
        .interval()
        .adjust("symmetric")
        .position("item*frequency")
        .shape("pyramid")
        .color("item", ["#ffe68d", "#bcedcd", "#73bee5", "#6fd6f0", "#94e9eb"])
        .label(
          "item*frequency",
          (item, frequency) => {
            return {
              content: `${item} ${frequency}`
            };
          },
          {
            offset: 35,
            labelLine: {
              style: {
                lineWidth: 1,
                stroke: "rgba(0, 0, 0, 0.15)"
              }
            }
          }
        )
        .animate({
          appear: {
            animation: "fade-in"
          },
          update: {
            annotation: "fade-in"
          }
        });
      chart.legend({
        position: "top"
      });

      chart.interaction("element-active");

      chart.render();
    },
    //观点情绪分析图
    createSentimentAnalysis() {
      const chart = new Chart({
        container: "sentiment_analysis",
        width: 250,
        height: 250
      });
      chart.data(this.sentimentAnalysisData);
      chart.line().position("sentiment*value");
      chart.area().position("sentiment*value");
      chart.coordinate("polar");
      chart.tooltip({
        showCrosshairs: true
      });
      chart.scale("value", {
        min: 0,
        max: 100
      });
      chart.render();
    },
    //事件传播趋势声浪图
    createSoundWavesChart() {
      fetch(
        "https://gw.alipayobjects.com/os/antvdemo/assets/data/baby-names.json"
      )
        .then(res => res.json())
        .then(data => {
          const { DataView } = DataSet;
          const dv = new DataView()
            .source(data)
            .transform({
              type: "fill-rows",
              groupBy: ["name"],
              orderBy: ["year"]
            })
            .transform({
              type: "impute",
              field: "n",
              method: "value",
              value: 0
            })
            .transform({
              type: "aggregate",
              fields: ["n"],
              operations: ["sum"],
              groupBy: ["year", "name"],
              orderBy: ["year"],
              as: ["count"]
            });

          const chart = new Chart({
            container: "sound_waves",
            autoFit: true,
            // width:1000,
            height: 500,
            padding: [20, 140, 60, 50]
          });
          chart.data(dv.rows);
          chart.scale("year", {
            tickInterval: 20
          });
          chart.legend({
            position: "right"
          });
          chart.axis("count", {
            line: {
              style: {
                lineWidth: 1,
                stroke: "#BFBFBF"
              }
            },
            tickLine: {
              length: 8,
              style: {
                stroke: "#ddd"
              }
            },
            grid: null
          });
          chart
            .area()
            .position("year*count")
            .adjust(["stack", "symmetric"])
            .color("name")
            .shape("smooth")
            .style({
              fillOpacity: 0.85
            });
          chart.render();
        });
    }
  },
  mounted() {
    this.pathChart();
    this.createHotWordCloud();
    this.createEaChart();
    this.createAreaMapChart();
    this.createMediaType();
    this.createMediaTypeSubordinate();
    this.createMediaInfluenceTrends();
    this.createPlatformImpact();
    this.createSentimentAnalysis();
    this.createSoundWavesChart();
  }
};
</script>

<style lang="less" scoped>
.send-news {
  margin-bottom: 10px;
}
.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
/* 旋转 */
.aa {
  transition: all 0.2s;
  transform-origin: 50% 50%;
}
.go {
  transform: rotate(-180deg);
  transition: all 0.2s;
  transform-origin: 50% 50%;
}
/* 卡片样式 */
.pa_card {
  margin-bottom: 1vh;
  background: #fdfdfd;
}
/* 卡片标题 */
.card_title {
  border-bottom: #efefef solid 1px;
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.pa_information_display{
  background: #fdfdfd;
  padding: 10px 0;
  margin-bottom: 1vh;
  border: rgb(234, 232, 236) solid 1px;
}
// 事件时间
.event_time {
  color: #888;
  margin-top: 5px;
  margin-bottom: 5px;
}
// 主题脉络时间轴
.context_time_line {
  height: 40px;
  background-image: url(../assets/IMG/ctl_bac.png);
  background-size: 100% 100%;
}
// 时间轴每一项标签
.ctl_label {
  margin-top: 8px;
  border: #ff9900 solid 1px;
  border-radius: 10%;
  width: auto;
  display: inline-block;
  padding: 0 5px 0;
  margin-left: 20px;
  color: #ff9900;
}
/* 每行的样式 */
.ppath_row_style {
  margin-bottom: 20px;
  font-size: 16px;
  /deep/.ivu-progress-text {
    color: #4196ff !important;
  }
}
/* 标记圆形点 */
.circle_icon {
  background-color: #3281f7;
  height: 8px;
  width: 8px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
// 情感属性右侧
.ea_right {
  font-size: 18px;
}
// 媒体排行每行样式
.pa_media_row {
  margin-bottom: 10px;
}
.pa_media_row_first {
  // margin-bottom: 10px;
  margin-top: 60px;
}
// 媒体排行中包裹logo的盒子
.pa_media_logo {
  border: 1px solid #dddddd;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
// logo图片的样式
.pa_media_logo_img {
  width: 17px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
// 重点人员卡片
.staff_card {
  height: 80px;
  margin-top: 10px;
}
// 重点人员卡片头像
.card_avatar {
  width: 70%;
  border-radius: 5%;
}
// 人员职业
.staff_occupation {
  color: #888888;
}
// 观点分析条目
.opinion_analysis_entry {
  margin-bottom: 10px;
  font-size: 16px;
}
</style>
